<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>统一认证平台</title>
</head>
<style>
    body {
        height: 100vh;
        overflow: hidden;
        background: linear-gradient(200deg, #72afd3, #96fbc4);
        margin: 0;
    }

    .bottom-container {
        position: absolute;
        width: 100%;
        height: 32vh;
        bottom: -10vh;
        transform: skew(0, 3deg);
        background: rgb(23, 43, 77);
    }

    .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .form-login {
        z-index: 20;
        width: 25vw;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border-radius: 3%;
        padding: 35px 50px;
        background: rgb(247, 250, 252);
    }

    .form-login a {
        text-decoration: none;
    }

    /* 上方欢迎语 */
    .welcome-text {
        color: black;
        display: flex;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.7;
        align-items: center;
        justify-content: center;
    }

    .welcome-text img {
        margin-right: 12px !important;
    }

    /* 提示文字 */
    .text-placeholder {
        display: flex;
        font-size: 80%;
        color: #909399;
        justify-content: center;
    }

    /* 表单输入框 */
    .form-login input[type=text], .form-login input[type=password] {
        width: 100%;
        height: 40px;
        outline: none;
        text-indent: 15px;
        border-radius: 3px;
        border: 1px #e4e7ed solid;
    }

    /* 表单验证码容器 */
    .code-container {
        display: flex;
        justify-content: space-between;
    }

    /* 表单验证码容器 */
    .code-container input {
        margin-right: 10px;
    }

    /* 按钮样式 */
    .btn-primary {
        height: 40px;
        color: white;
        cursor: pointer;
        border-radius: 0.25rem;
        background: #5e72e4;
        border: 1px #5e72e4 solid;
        transition: all 0.15s ease;
    }

    .captcha-sms {
        height: 40px;
        color: #5e72e4;
        border-radius: 3px;
        align-items: center;
        justify-content: center;
        border: 1px #5e72e4 solid;
        display: none;
        width: 160px;
        background-color: white;
    }

    .captcha-sms:hover {
        transform: translateY(-3%);
        -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
        box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    }

    .btn-primary:hover {
        transform: translateY(-3%);
        -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
        box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    }

    .oauth-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }
</style>
<body>
<div class="bottom-container"></div>
<div class="container">
    <form class="form-login" method="post" action="auth/login">
        <div class="welcome-text">
            <span style="font-weight: bolder;font-size: 1.5rem;user-select: none">统一认证平台</span>
        </div>
        <label style="display: none">
            <input id="captchaId" name="captchaId" type="text"/>
        </label>
        <label>
            <input id="username" name="username" type="text" placeholder="账号 / 手机号码 / 邮箱" required autofocus/>
        </label>
        <label>
            <input id="password" name="password" type="password" placeholder="请输入密码" required/>
        </label>
        <label class="code-container">
            <input name="captcha" type="text" placeholder="验证码" required/>
            <img id="captcha" alt="验证码" src="" style=" width: 150px;height: 40px;" onclick="getCaptchaImage()"/>
            <a id="captchaSms" class="captcha-sms" href="javascript:getSmsCaptcha()">获取验证码</a>
        </label>
        <div style="display: flex;justify-content: space-between;">
            <label style="cursor: pointer">
                <input type="checkbox" id="remember-me"/>
                <span>记住我</span>
            </label>
            <label><a id="changeLoginId" href="javascript:changeLoginType()">短信验证登录</a></label>
        </div>
        <button type="submit" class="btn-primary">登录</button>
        <div class="text-placeholder"> 第三方登录</div>
        <div class="oauth-box">
            <a href="#" title="Gitee登录">
                <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
                    <path fill="red"
                          d="M898 1992q183 0 344-69.5t283-191.5q122-122 191.5-283t69.5-344q0-183-69.5-344T1525 477q-122-122-283-191.5T898 216q-184 0-345 69.5T270 477Q148 599 78.5 760T9 1104q0 183 69.5 344T270 1731q122 122 283 191.5t345 69.5zm199-400H448q-17 0-30.5-14t-13.5-30V932q0-89 43.5-163.5T565 649q74-45 166-45h616q17 0 30.5 14t13.5 31v111q0 16-13.5 30t-30.5 14H731q-54 0-93.5 39.5T598 937v422q0 17 14 30.5t30 13.5h416q55 0 94.5-39.5t39.5-93.5v-22q0-17-14-30.5t-31-13.5H842q-17 0-30.5-14t-13.5-31v-111q0-16 13.5-30t30.5-14h505q17 0 30.5 14t13.5 30v250q0 121-86.5 207.5T1097 1592z"/>
                </svg>
            </a>
            <a href="#" title="Github登录">
                <svg height="32" aria-hidden="true" viewBox="0 0 24 24" width="32" data-view-component="true">
                    <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path>
                </svg>
            </a>
            <a href="#" title="微信登录">
                <svg height="32" viewBox="-17.99895 -29.9655 155.9909 179.793">
                    <defs>
                        <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="scale(1.00055 .99946)" id="a" y2="120.057" x2="59.964" y1=".456" x1="59.964">
                            <stop offset="0%" stop-color="#02E36F"/>
                            <stop offset="100%" stop-color="#07C160"/>
                        </linearGradient>
                    </defs>
                    <g fill-rule="evenodd" fill="none">
                        <path fill="url(#a)" d="M24.607.13C11.072.13 0 11.19 0 24.713V95.41c0 13.52 11.072 24.58 24.607 24.58h70.778c13.464 0 24.495-10.947 24.608-24.372V24.506C119.88 11.08 108.849.13 95.385.13z" transform="translate(0 -.13)"/>
                        <path fill="#FFF"
                              d="M108.516 71.355c0-13.473-13.118-24.375-29.297-24.375-16.18 0-29.297 10.902-29.297 24.375 0 13.425 13.117 24.326 29.297 24.375 3.342-.049 6.57-.525 9.61-1.406.224-.06.206-.058.795-.174.59-.115 1.103.174 1.548.408l6.328 3.75c.291.156.464.234.703.234.513 0 .949-.436.938-.937.011-.277-.078-.497-.146-.73-.069-.231-.854-3.09-1.26-4.895-.058-.256-.09-.403-.09-.886 0-.484.25-1.004.793-1.458 6.13-4.364 10.078-10.969 10.078-18.281zM69.26 67.136c-1.956 0-3.636-1.678-3.636-3.863 0-1.958 1.68-3.637 3.636-3.637 2.186 0 3.864 1.68 3.864 3.637 0 2.185-1.678 3.863-3.864 3.863m19.453 0c-1.956 0-3.636-1.678-3.636-3.863 0-1.958 1.68-3.637 3.636-3.637 2.186 0 3.864 1.68 3.864 3.637 0 2.185-1.678 3.863-3.864 3.863"/>
                        <path fill="#FFF"
                              d="M11.25 49.324c0 8.73 4.733 16.655 12.188 22.03.549.405.842.867.842 1.643 0 .269-.047.557-.14.936-.623 2.55-1.307 5.468-1.406 5.86-.098.39-.254.65-.234.937-.02.649.504 1.172 1.172 1.172.233 0 .442-.095.703-.235l7.734-4.453c.49-.296 1.04-.449 1.41-.449.372 0 .991.115 1.403.215 3.586.916 7.457 1.49 11.484 1.406a7.84 7.84 0 001.875 0 23.953 23.953 0 01-1.172-7.031c.03-14.81 14.377-26.744 32.11-26.719.608-.025 1.242-.005 1.875 0-2.647-13.933-17.175-24.61-34.688-24.61-19.424 0-35.156 13.085-35.156 29.298zm23.203-4.688a4.687 4.687 0 110-9.375 4.687 4.687 0 110 9.375m23.438 0a4.687 4.687 0 110-9.375 4.688 4.688 0 010 9.375"/>
                    </g>
                </svg>
            </a>
        </div>
    </form>
</div>
</body>
<script>
    // 获取图片验证码
    function getCaptchaImage() {
        fetch(`${window.location.origin}/auth/captcha`, {method: 'GET', redirect: 'follow'})
            .then(response => response.text())
            .then(r => {
                if (r) {
                    let result = JSON.parse(r);
                    document.getElementById('captchaId').value = result.data.captchaId
                    if (result.data.image) {
                        document.getElementById('captcha').src = result.data.image;
                    }
                }
            })
            .catch(error => console.log('error', error));
    }

    // 切换登录方式，账密登录|短信登录
    function changeLoginType() {
        let changeLoginElement = document.getElementById('changeLoginId');
        if (changeLoginElement.innerText === '账密验证登录') {
            let username = document.getElementById('username');
            username.placeholder = '账号 / 手机号码 / 邮箱';
            // 显示密码框
            let password = document.getElementById('password');
            password.style.display = '';
            // 显示图片验证码
            let captcha = document.getElementById('captcha');
            captcha.style.display = '';
            // 隐藏发送短信验证码
            let captchaSms = document.getElementById('captchaSms');
            captchaSms.style.display = 'none';
            changeLoginElement.innerText = '短信验证登录';
        } else {
            let username = document.getElementById('username');
            username.placeholder = '手机号码 / 邮箱';
            // 隐藏密码框
            let password = document.getElementById('password');
            password.style.display = 'none';
            // 隐藏图片验证码
            let captcha = document.getElementById('captcha');
            captcha.style.display = 'none';
            // 显示发送短信验证码
            let captchaSms = document.getElementById('captchaSms');
            captchaSms.style.display = 'flex';
            changeLoginElement.innerText = '账密验证登录';
        }
    }

    // 获取短信验证码
    function getSmsCaptcha() {
        let captchaSms = document.getElementById('captchaSms');
        captchaSms.style.pointerEvents = 'none';
        resetBtn(captchaSms);
    }

    /**
     * 1分钟倒计时
     */
    function resetBtn(getSmsCaptchaBtn) {
        let s = 60;
        getSmsCaptchaBtn.innerText = `重新获取(${--s})`
        // 定时器 每隔一秒变化一次（1000ms = 1s）
        let t = setInterval(() => {
            getSmsCaptchaBtn.innerText = `重新获取(${--s})`
            if (s === 0) {
                clearInterval(t)
                getSmsCaptchaBtn.innerText = '获取验证码'
                getSmsCaptchaBtn.style.pointerEvents = '';
            }
        }, 1000);
    }

    getCaptchaImage();
</script>

</html>